import React from 'react';
import { useTranslation } from 'react-i18next';
import { IonSelect, IonSelectOption, IonItem, IonLabel } from '@ionic/react';

const LanguageSelector: React.FC = () => {
  const { t, i18n } = useTranslation();

  const handleLanguageChange = (event: CustomEvent) => {
    const language = event.detail.value;
    i18n.changeLanguage(language);
  };

  return (
    <IonItem>
      <IonLabel>{t('settings.language')}</IonLabel>
      <IonSelect
        value={i18n.language}
        onIonChange={handleLanguageChange}
        interface="popover"
      >
        <IonSelectOption value="en">{t('settings.languages.en')}</IonSelectOption>
        <IonSelectOption value="zh">{t('settings.languages.zh')}</IonSelectOption>
        <IonSelectOption value="fr">{t('settings.languages.fr')}</IonSelectOption>
      </IonSelect>
    </IonItem>
  );
};

export default LanguageSelector; 